<script lang="ts" setup>
import type { OnActionClickParams } from '#/adapter/vxe-table';
import type {
  ProductStateModel,
  StepExecutionModel,
} from '#/api/production/models';
import type { ProcessTimelineModel } from '#/api/traceability/models';

import { ref } from 'vue';

import { Page, useVbenDrawer } from '@vben/common-ui';

import { Card, Flex, Timeline, TimelineItem } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  getProcessStepApi,
  getProcessTimelineApi,
} from '#/api/traceability/productProcessQuery';

import { useColumns } from './data';
import StepTaskDataDrawer from './modules/step-task-data-drawer.vue';
import ProductLimitSearch from './product-limit-search.vue';

const timelineLoading = ref(false);
const timelineData = ref<ProcessTimelineModel[]>([]);

const [DataDrawer, dataDrawerApi] = useVbenDrawer({
  connectedComponent: StepTaskDataDrawer,
  destroyOnClose: true,
});

/**
 * 显示过程数据
 */
function onOpen(row: StepExecutionModel) {
  dataDrawerApi.setData(row).open();
}

/**
 * 表格操作按钮的回调函数
 */
function onActionClick({ code, row }: OnActionClickParams<StepExecutionModel>) {
  switch (code) {
    case 'open': {
      onOpen(row);
      break;
    }
  }
}

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: {
    columns: useColumns(onActionClick),
    border: true,
    stripe: true,
    pagerConfig: {
      enabled: false,
    },
  },
});

async function onSelect(item: ProductStateModel) {
  gridApi.setLoading(true);
  const data = await getProcessStepApi(item.sn, item.lineId);
  gridApi.grid.loadData(data);

  setTimeout(() => {
    gridApi.setLoading(false);
  }, 300);

  timelineLoading.value = true;
  timelineData.value = await getProcessTimelineApi(item.sn, item.lineId);
  timelineLoading.value = false;
}

const tagColorForPassResult = (passResult?: number) => {
  if (passResult === 1 || passResult === 3) {
    return 'green';
  }
  if (passResult === 2 || passResult === 4) {
    return 'red';
  }
  if (passResult === 5) {
    return 'red';
  }
  return '';
};

const timelineColor = (data: ProcessTimelineModel) => {
  if (data.status === 1) {
    return 'gray';
  }
  if (data.status === 2) {
    return 'orange';
  }
  if (data.status === 3) {
    return tagColorForPassResult(data.passResult);
  }
  return '';
};
</script>

<template>
  <Page auto-content-height>
    <Flex class="h-full w-full">
      <div class="h-full w-3/12">
        <ProductLimitSearch class="h-full" @select="onSelect" />
      </div>
      <div class="ml-2 h-full w-7/12">
        <Grid />
      </div>
      <div class="ml-2 w-2/12 overflow-auto">
        <Card
          :loading="timelineLoading"
          class="h-full"
          size="small"
          title="作业流程"
        >
          <Timeline>
            <TimelineItem
              v-for="(item, index) in timelineData"
              :key="index"
              :color="timelineColor(item)"
            >
              <p>
                <span> {{ item.operationCode }} </span>
                <span v-if="item.passCount > 1" class="ml-2">
                  ({{ item.passCount }})
                </span>
              </p>
            </TimelineItem>
          </Timeline>
        </Card>
      </div>
    </Flex>
    <DataDrawer />
  </Page>
</template>
